<template>
    <div>
      <el-card shadow="never">
        <div class="head" >
          <h3>文章分类</h3>
          <el-button type="primary"  @click="addCate">添加分类</el-button>
        </div>

        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
            width="200">
          </el-table-column>

          <el-table-column
            prop="cate_name"
            label="文章类别"
            >
          </el-table-column>
          <el-table-column
            prop="cate_alias"
            label="分类别名">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)">修改</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row, '')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

<!-- 添加图书弹出层 -->
        <el-dialog  ref="dialogfrom" :visible.sync="dialogFormVisible" width="30%" @close="cancelBtn">
          <template slot="title">
            <div class="title">
              <i class="el-icon-warning"></i>
              {{dialong.title }}
            </div>
          </template>
          <el-form  v-if="!isDel" label-width="80px" :model="form" :rules="rules" hide-required-asterisk ref="addbook">

            <el-form-item label="分类名称" prop="cate_name" >
              <el-input v-model="form.cate_name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="分类别名" prop="cate_alias">
              <el-input v-model="form.cate_alias" placeholder="请输入别名"></el-input>
            </el-form-item>

          </el-form>
          <span v-else>确定要删除本条信息吗?</span>
          <div slot="footer" class="dialog-footer">
            <el-button @click="outbtn">取 消</el-button>
            <el-button type="primary" @click="okBtn">{{dialong.button}}</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import { getarticate, putarticateinfo, postarticate, getarticateinfo, delarticateinfo } from '@/api/articate'
export default {
  name: 'BigEventIndex',

  data () {
    return {
      tableData: [],
      dialogFormVisible: false,
      dialong: {
        title: '添加分类',
        button: '确定'
      },
      // 判断是否删除
      isDel: false,
      form: {
        id: '',
        cate_name: '',
        cate_alias: ''
      },
      formLabelWidth: '4rem',
      labelPosition: 'left',
      rules: {
        cate_name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { pattern: /^[\S]{1,10}$/, message: '非空字符串、长度为 1-10', trigger: 'blur' }
        ],
        cate_alias: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{1,15}$/, message: '只能是字母数字、长度为 1-15', trigger: 'change' }
        ]
      }
    }
  },

  created () {
    // 初始化获取分类列表
    this.getarticate()
  },

  mounted () {

  },

  methods: {
    // 添加弹出按钮
    addCate () {
      this.dialong = {
        title: '添加分类',
        button: '确定'
      }
      this.dialogFormVisible = true
    },

    // 修改文章分类
    async handleEdit (index, row) {
      const { data: res } = await getarticateinfo(row.id)
      this.form = res.data
      this.dialong = {
        title: '修改分类详情',
        button: '确认修改'
      }
      this.dialogFormVisible = true
    },

    // 删除文章分类
    async handleDelete (index, row) {
      this.dialogFormVisible = true
      this.dialong = {
        title: '提示',
        button: '确定删除'
      }
      this.isDel = true
      this.form = row
    },
    // 获取图书分类列表
    async getarticate () {
      const { data } = await getarticate()
      this.tableData = data.data
    },
    // 添加  --  修改  弹层确认
    async okBtn () {
      let res = {}
      if (this.isDel) {
        res = await delarticateinfo(this.form.id)
      } else {
        await this.$refs.addbook.validate()

        if (this.form.id) {
          res = await putarticateinfo(this.form)
        } else {
          res = await postarticate(this.form)
        }
      }
      this.dialogFormVisible = false
      this.getarticate()
      this.$message.success(res.data.message)
    },
    outbtn () {
      this.dialogFormVisible = false
    },
    // 关闭回调
    async cancelBtn () {
      if (this.isDel) {
        this.dialogFormVisible = false
        return
      }
      this.form = {
        cate_name: '',
        cate_alias: ''
      }
      await this.$refs.addbook.resetFields()
      this.dialogFormVisible = false
      this.isDel = false
    }
  }
}
</script>

<style lang="less" scoped>
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #E7E7E7;
  margin-bottom:3rem ;
}
.el-icon-warning {
  color: #4F81FF;
  // font-size: 1.5rem;
  }
  .title {
    height: 2rem;
    line-height: 2rem;
    font-size: 1.5rem;
  }
</style>
